<template>
    <div class="container-fluid" v-loading="loading">

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header"><h4>产品创建</h4></div>
                    <div class="card-body">
                        <!--<div class="form-group">
                            <label for="title">分类</label>
                            <el-select
                                    v-model="value"
                                    multiple
                                    filterable
                                    remote
                                    reserve-keyword
                                    placeholder="请输入关键词"
                                    :remote-method="remoteMethod"
                                    :loading="loading">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.value"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>-->

                        <div class="form-group">
                            <label for="title">商品名称</label>
                            <input type="text" class="form-control" v-model="name" placeholder="名称..">
                        </div>
                        <div class="form-group">
                            <label for="title">价格数字</label>
                            <input type="text" class="form-control" v-model="price" placeholder="价格数字..">
                        </div>
                        <div class="form-group">
                            <label for="imageUrl">封面图片</label>

                            <el-upload
                                    action="/api/upload"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-success="handleImgUrlSuccess"
                                    :on-remove="handleRemove"
                                    :before-upload="beforeAvatarUpload">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>

                            <!--<el-upload
                                    class="avatar-uploader"
                                    action="/api/upload"
                                    :show-file-list="false"
                                    :on-success="handleImgUrlSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>-->
                        </div>
                        <div class="form-group">
                            <label for="content">产品介绍</label>
                            <vue-ueditor-wrap v-model="content" :config="editorOption"></vue-ueditor-wrap>
                        </div>
                        <button type="submit" class="btn btn-primary" v-on:click="submit()">提交</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "GoodsCreateComponent",
        data(){
            return {
                loading:false,
                name: '',
                price:'',
                imageArr:[],
                options:[],
                value:'',
                content:'',
                editorOption: {},
                dialogImageUrl:'',
                dialogVisible:false,
                companyId:$('meta[name="id"]').attr('content'),
                companies:[],
            }
        },
        methods: {
            handleRemove(file, fileList) {
                this.imageArr.splice(this.imageArr.indexOf(file), 1);
                console.log(fileList);
                console.log('fileList');
                console.log(this.imageArr);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleImgUrlSuccess: function (response) {
                let self = this;
                if (response.code === 200) {
                    var imageUrl = response.url;
                    self.imageArr.push(imageUrl);
                }
                console.log(response)
            },
            beforeAvatarUpload: function (item) {
                console.log(item)
            },
            submit:function () {
                let self = this;
                let uri = "goods/store";

                if (!self.name) {
                    self.$message.error("必须填写名称");
                    return;
                }
                if (!self.price) {
                    self.$message.error("必须填写价格");
                    return;
                }
                if (self.imageArr.length<=0) {
                    self.$message.error("必须不少于一张的轮播图");
                    return;
                }
                if(!this.content){
                    self.$message.error("必须填写产品介绍");
                    return;
                }
                self.loading = true;
                let postData = {
                    companyId:self.companyId,
                    name: self.name, price: self.price,
                    imageUrlArr:self.imageArr,body:self.content};

                axios.post(uri,postData).then(function (result) {
                    if (result) {
                        this.openUri('company/goods/'+self.companyId);
                    } else {
                        self.$message.error("创建产品失败！");
                    }
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            initUpload() {
                this.editorOption =
                    {
                        // 编辑器不自动被内容撑高
                        autoHeightEnabled: false,
                        // 初始容器高度
                        initialFrameHeight:340,
                        // 初始容器宽度
                        initialFrameWidth: '100%',
                        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                        serverUrl: '/api/upload',
                        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                        UEDITOR_HOME_URL: '/static/UEditor/'
                    };
            },
            queryCompany(query) {
                let self = this;
                let uri = "company/search/"+query;

                axios.get(uri).then(function (result) {
                    self.companies = result.list;
                });
            },
            remoteMethod(query) {
                if (query !== '') {
                    this.queryCompany(query);
                    this.loading = true;
                    this.options = [];
                    setTimeout(() => {
                        this.loading = false;
                        this.options = this.companies;
                    }, 200);
                } else {
                    this.options = [];
                }
            }
        },
        mounted() {
            this.initUpload();
        }
    }
</script>

<style scoped>

</style>
